<template>
    <div>
        <div class="home-ordinary-box">
            <div style="position: fixed;top: 128px;left: 290px;display: none;" >
                <a-button style="margin-right: 15px;" class="blue-btn" type="primary" @click="displayBtn = !displayBtn">首页></a-button>
                <a-button v-if="displayBtn" style="margin-right: 15px;" :type="!flexBox?'primary':''" @click="flexBox = false">固定宽高95*95</a-button>
                <a-button v-if="displayBtn" :type="flexBox?'primary':''" @click="flexBox = true">按照屏幕大小进行计算</a-button>
            </div>
            <div class="content-top-box" v-if="!flexBox">
                <div class="contentBox-mainDiv">
                    <!-- style="height:100px" -->
                    <!--新1： <div class="home-palace-grid" :style="{width:(windowInnerHeight / 2) * Math.ceil((menuList.length>5?menuList.length/2:menuList.length))+'px',}" >
                        <div class="home-grid-item" v-for="(item,index) in menuList" :key="index" @click="toNext(item)" v-if="item.view == true" >
                            <span class="tips-box" v-if="item.count">{{ itemCount(item.count) }}</span>
                            <div class="home-grid-icon-div" :class="'home-grid-icon-box-bg'+index" :style="{width: (windowInnerHeight / 2) - 40 + 'px',height:(windowInnerHeight / 2) - 40 + 'px',borderRadius:((windowInnerHeight / 2) - 40)/4.5+'px'}">
                                <span v-if="iconType(item.icon)" :class="'iconfont ' + item.icon" :style="{fontSize:((windowInnerHeight / 2) - 40)/2+'px',}"></span>
                                <ych-icon+
                                    :style="{fontSize:((windowInnerHeight / 2) - 40)/2+'px',}"
                                    v-else
                                    :type="item.icon"
                                    >
                                </ych-icon>
                            </div>
                            <span
                            v-if="item.name.length >= 6"
                             class="home-grid--title"
                             :style="{fontSize:((windowInnerHeight / 2) - 40) / 6 + 'px'}">{{ item.name }}</span>
                             <span class="home-grid--title" v-else>
                                <span v-for="(trem,tI) in item.name.split('')"
                                 :style="{fontSize:((windowInnerHeight / 2) - 40) / 6 + 'px',paddingLeft:tI>0?((((windowInnerHeight / 2) - 40) - (((windowInnerHeight / 2) - 40)/6 * item.name.length)) / (item.name.length - 1)  + 'px'):0}"
                                 >{{ trem }}</span>
                             </span>
                        </div>
                    </div> -->
                    <div class="home-palace-grid" :style="{width:(gridItemSize * Math.ceil((menuList.length>5?menuList.length/2:menuList.length))+Math.ceil((menuList.length>5?menuList.length/2:menuList.length))*((((windowInnerWidth - gridItemSize * Math.ceil((menuList.length>5?menuList.length/2:menuList.length)))/1.6) /Math.ceil((menuList.length>5?menuList.length/2:menuList.length))) / 2 * 2))+20+'px',}" >
                        <div class="home-grid-item"
                         v-for="(item,index) in menuList"
                         :key="index" @click="toNext(item)"
                         v-if="item.view == true"
                         :style="{margin:((windowInnerHeight - ((gridItemSize+40) * 2)) / 6>10?(windowInnerHeight - ((gridItemSize+40) * 2)) / 6:10)+'px '+(((windowInnerWidth - gridItemSize * Math.ceil((menuList.length>5?menuList.length/2:menuList.length)))/1.6) /Math.ceil((menuList.length>5?menuList.length/2:menuList.length))) / 2  +'px'}"
                         >
                            <div
                             class="home-grid-icon-div"
                             :class="'home-grid-icon-box-bg'+index"
                             :style="{width: gridItemSize+'px',height: gridItemSize+'px',borderRadius: gridItemSize / 4+'px',}"
                            >
                                <span class="tips-box" v-if="item.count">{{ itemCount(item.count) }}</span>
                                <div style="height: 100%;display: flex;justify-content: center;align-items: center;">
                                    <span v-if="iconType(item.icon)" :class="'iconfont ' + item.icon" :style="{fontSize:55+'px',}"></span>
                                    <ych-icon
                                        :style="{fontSize:55+'px',}"
                                        v-else
                                        :type="item.icon"
                                        >
                                    </ych-icon>
                                </div>

                            </div>
                            <span
                            v-if="item.name.length >= 6"
                             class="home-grid--title"
                             :style="{fontSize:16 + 'px'}">{{ item.name }}{{ displaySelection }}</span>
                             <span class="home-grid--title" v-else>
                                <span v-for="(trem,tI) in item.name.split('')"
                                 :style="{fontSize:16 + 'px',}"
                                 >{{ trem }}</span>
                             </span>
                        </div>
                    </div>

                    <!-- 原：<div style="margin:0 auto;display: flex;flex-wrap:wrap;justify-content:center;" :style="{width:((Math.ceil(windowInnerHeight / 4) * 5)+300)+'px'}">

                        <div class="aaaaaaa" @click="toNext(item)" v-if="item.view == true" v-for="(item,index) in menuList" style="padding:30px;text-align:center" :span="8">
                            <div  class="menuDiv" :style="{height:(windowInnerHeight / 4)+'px',width:(windowInnerHeight / 4)+'px',}">
                                <span class="badge" v-if="item.count !== 0">{{ itemCount(item.count) }}</span>
                                <i
                                    v-if="iconType(item.icon)"
                                    class="menuDiv-icon iconfont"
                                    :class="item.icon"
                                    >
                                </i>
                                <ych-icon
                                    v-else
                                    class="menuDiv-icon"
                                    :type="item.icon"
                                    >
                                </ych-icon>
                                <span style="padding-top:8px">{{ item.name }}</span>
                            </div>
                        </div>
                        <a-row>
                            <a-col @click="toNext(item)" v-if="item.view == true" v-for="(item,index) in menuList" :key="index" :span="6" class="menuCol">
                                <div class="menuCol-div">
                                    <span class="badge" v-if="item.count !== 0">{{ itemCount(item.count) }}</span>
                                    <ych-icon
                                        class="menuDiv-icon"
                                        :type="item.icon"
                                        :style="{backgroundImage: bg4(item.name)}">
                                    </ych-icon><br/>
                                    {{ item.name }}
                                </div>
                            </a-col>
                        </a-row>
                    </div> -->
                </div>
            </div>
            <div class="content-top-box" v-else >
                <div class="contentBox-mainDiv">
                    <div class="home-palace-grid" :style="{width:(windowInnerHeight * 0.19 + 5 + (((windowInnerWidth - (windowInnerHeight * 0.19) * Math.ceil((menuList.length>5?menuList.length/2:menuList.length)))/1.6) /Math.ceil((menuList.length>5?menuList.length/2:menuList.length)))) * Math.ceil((menuList.length>5?menuList.length/2:menuList.length))+'px'}">
                        <div class="home-grid-item"
                         v-for="(item,index) in menuList"
                         :key="index" @click="toNext(item)"
                         v-if="item.view == true"
                         :style="{margin:(windowInnerHeight - ((windowInnerHeight * 0.19 + 40) * 2)) / 6+'px '+(((windowInnerWidth - (windowInnerHeight * 0.19) * Math.ceil((menuList.length>5?menuList.length/2:menuList.length)))/1.6) /Math.ceil((menuList.length>5?menuList.length/2:menuList.length))) / 2  +'px'}"
                         >
                            <div
                             class="home-grid-icon-div"
                             :class="'home-grid-icon-box-bg'+index"
                             :style="{width:windowInnerHeight * 0.19,height:windowInnerHeight * 0.19,borderRadius:windowInnerHeight * 0.19 / 4}"
                            >
                                <span class="tips-box" v-if="item.count"  :style="{right:'-'+(windowInnerHeight * 0.19) * 0.11+'px'}" >{{ itemCount(item.count) }}</span>
                                <div style="height: 100%;display: flex;justify-content: center;align-items: center;">
                                    <span v-if="iconType(item.icon)" :class="'iconfont ' + item.icon" :style="{fontSize:windowInnerHeight * 0.19 * 0.58+'px',}"></span>
                                    <ych-icon
                                        :style="{fontSize:windowInnerHeight * 0.19 * 0.58+'px',}"
                                        v-else
                                        :type="item.icon"
                                        >
                                    </ych-icon>
                                </div>
                            </div>
                            <span
                            v-if="item.name.length >= 6"
                             class="home-grid--title"
                             :style="{fontSize:windowInnerHeight * 0.19 / 6 + 'px'}">{{ item.name }}</span>
                             <span class="home-grid--title" v-else>
                                <span v-for="(trem,tI) in item.name.split('')"
                                 :style="{fontSize:windowInnerHeight * 0.19 / 6 + 'px',}"
                                 >{{ trem }}</span>
                             </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="content-footer-box">
                <div class="one-half">
                    <a-card title="公告" style="width: 100%;height: 100%;" :headStyle="headStyle">
                        <a slot="extra" href="#" @click="jobGongGao">查看更多</a>
                        <div v-for="(item,index) in gongGaoCard" :key="index" class="cardSpan" @click="viewGangGao(item)">
                            <a-tag v-if="item.fsfzd == '1'" color="red" class="cardSpan-Title">
                                置顶
                            </a-tag>
                            <p v-else style="display:inline-block;width:90px;"></p>
                            <span>{{ item.fggbt}}</span>
                            <span style="float: right;">{{ item.ffbsj}}</span>
                        </div>
                    </a-card>
                </div>
                <div class="two-half">
                    <a-card :title="'消息'+'        '+'有'+badgeNum+'条待阅'" style="width: 100%;height: 100%;" :headStyle="headStyle">
                        <a slot="extra" href="#" @click="jobMessage">查看更多</a>
                        <div v-for="(item,index) in messList" :key="index" class="cardSpan" @click="handleClick(item)">
                            <a-tag :color="cardColorList[index]?cardColorList[index]:cardColorList[0]">
                                {{ item.ftzsxlx }}
                            </a-tag>
                            <span>{{ item.fmessage }}</span>
                        </div>
                    </a-card>
                </div>
            </div> -->
            <handleModal ref="handleModalRef"></handleModal>
            <addAndEditModal ref="addAndEditModalRef" :formObj="formObj"></addAndEditModal>
        </div>
    </div>
</template>
<script>
import { queryTopMenuList,sysMessList,queryByJodId,queryPageYxNotice,getTzMessage,menuQueryAllMenuList,menuverifyAuth } from './service/index'
import handleModal from '../../administrativeOffice-new/modal/handleModal.vue'
import  addAndEditModal  from '../../notice/addAndEdit.vue'
import store from '@/store'
import { mapState, mapActions ,mapGetters} from 'vuex'
import { ConsoleSqlOutlined } from '@ant-design/icons-vue'
export default {
    components:{
        handleModal,
        addAndEditModal
    },
    props:{
    },
    data(){
        return{
            realName: '',
            headStyle:{"font-weight": "600","min-height":"38px","max-height":"40px",'position': 'relative'},
            menuList: [],
            gongGaoCard: [],
            menuColorList: [
                'background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8), rgba(28, 157, 208, 0.5));',
                'background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8), rgba(115, 197, 150, 0.5));',
                'background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8), rgba(67, 140, 215, 0.5));',
                'background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8), rgba(117, 113, 220, 0.5));',
            ],
            cardColorList:[
                'pink',
                'red',
                'orange',
                'green',
                'cyan',
                'blue',
                'purple',
            ],
            badgeNum: 0,
            messList: [],
            formObj: {},
            // windowInnerHeight:window.innerHeight - 8 - 20,
            // windowInnerHeight:window.innerHeight / 1.65,
            windowInnerHeight:window.innerHeight - 134,
            windowInnerWidth:window.innerWidth - 16,
            modelPaddind:45,//写死容易同意
            gridItemSize:95,

            displayBtn:false,
            flexBox:false,
            contentTopboxKey:null,
        }
    },
    watch:{

    },
    mounted(){
        this.getData()
        // this.getsysMessList()
        this.getGongGaoList()
        //console.log(this.windowInnerHeight)
        //console.log(this.windowInnerWidth)
        // window.addEventListener('resize',this.handleHeight)
        this.windowInnerHeight = window.innerHeight - 134
        this.windowInnerWidth = window.innerWidth - 16
        //console.log(this.windowInnerHeight)
        //console.log(this.windowInnerWidth)
        this.$nextTick(()=>{
            this.contentTopboxKey = Date.now()
        })
    },
    computed: {
        // ...mapState({
        //     permissionMenuList: state => state.user.permissionList,
        //     displaySelection: state => state.user.displaySelection,
        // }),
        displaySelection(){
          return this.$store.state.user.displaySelection
        },
    },
    methods:{
        getData(){
            // //console.log(this.permissionMenuList)

            this.realName = store.getters.userInfo.realname
            //原来用的
            // queryTopMenuList().then(res => {
            //     // //console.log(res)
            //     this.menuList = res.result
            // })
            queryTopMenuList().then(res => {
                //console.log(res)
                this.menuList = res.result
                // let num = (this.menuList.length && this.menuList.length>10?this.menuList.length:10) * 0.165
                // this.windowInnerHeight = window.innerHeight / num
            })
        },
        handleHeight(){
            // let menuNum = this.menuList.length && this.menuList.length>10?this.menuList.length:10
            // let num = menuNum * 0.165
            // this.windowInnerHeight = window.innerHeight / num
        },
        toNext(item){
            //console.log(item)
            let that = this
            // store.commit('SET_PERMISSIONLIST', userInfo)
            //console.log(this.$store.state.user.permissionList,!undefined)
            menuverifyAuth({id:item.id}).then(res=>{
                if(res.code !== 200){
                    this.$message.warning('菜单暂无权限，请联系管理员进行授权！')
                }else{
                    this.$store.state.user.permissionList.forEach((trem,index)=>{
                        if(trem.meta.title == item.name && trem.path == item.path){
                            //console.log(trem)
                            // store.commit('SET_CURRENTMODULEMENUOBJ', item)
                            // store.commit('SET_MODULEMENULIST', trem.children)
                            if(!sessionStorage.getItem('currentModulemenuObj') || (sessionStorage.getItem('currentModulemenuObj') && JSON.parse(sessionStorage.getItem('currentModulemenuObj')).path !== item.path)){
                                this.$store.commit('SET_REWRITEGLOBALTABS', true)
                            }
                            //做缓存
                            sessionStorage.setItem('currentModulemenuObj', JSON.stringify({...item,componentProps:[],children:[],childrenFirstPath:trem.children[0].path,childrenName:trem.children[0].name,childrenTitle:trem.children[0].meta.title}))
                            // this.$store.dispatch('getCurrentModulemenuObj', trem.children)
                            this.$store.dispatch('getCurrentModulemenuObj',item).then(res => {
                                that.$router.push({
                                    path: trem.children[0].path,
                                    // query: { id: item.id }
                                }).catch(err => {});
                                //console.log(trem.children)
                            })

                        }
                    })
                }
            })


            return false

            if(item.open == false){
                this.$router.push({
                    path: item.path,
                    query: { id: item.id }
                }).catch(err => {});
            } else {
                this.$router.push({
                    path: '/homeComp/ordinary/childrenMenu',
                    query: { id: item.id }
                }).catch(err => {});
            }
        },
        itemCount(count){
            if(count >=1 && count <= 99){
                return count
            } else {
                return '99+'
            }
        },
        // 公告
        getGongGaoList(){
            queryPageYxNotice().then(res => {
                // //console.log(res)
                this.gongGaoCard = res.result.records

                this.gongGaoCard.forEach(item => {
                    let nian = item.ffbsj.substr(0,4)
                    let yue = item.ffbsj.substr(5,2)
                    let ri = item.ffbsj.substr(8,2)
                    // this.form.frq = nian + '-' + yue + '-' + ri
                    item.ffbsj = nian + '年' + yue + '月' + ri + '日'
                })
            })
        },
        // 获取未读消息列表
        getsysMessList(){
            sysMessList().then(res => {
                // //console.log('获取未读消息列表',res)
                this.badgeNum = res.result.total
                this.messList = res.result.records
                // //console.log('badgeNum',this.badgeNum)
                // //console.log('messList',this.messList)
            })
        },
        jobGongGao(){
            this.$router.push({
                path: '/notice/viewNotice',
            }).catch(err => {});
        },
        jobMessage(){
            this.$router.push({
                path: '/account/userannouncement',
                name: 'account-userannouncement'
            }).catch(err => {});
        },
        handleClick(item){
            // //console.log(item)
            let data = {
                jobId: item.fjobid,
                lcmbbm: item.flcbm,
                fpid: item.fsxid,
            }
            queryByJodId(data).then(res => {
                // //console.log(res)
                if(res.code == 200){
                    this.$nextTick(_ => {
                        this.$refs.handleModalRef.modalClick(res.result)
                        getTzMessage({ids:item.id}).then(res => {
                            if(res.code == 200){
                                this.getsysMessList()
                            }
                        })
                    })
                }
            })
        },
        viewGangGao(item){
            this.formObj = {
                title: item.fggbt,
                id: item.id,
                type: 'view'
            }
            this.$nextTick(_ => {
                this.$refs.addAndEditModalRef.editorVisible = true
            })
        },
        iconType(name){
            if(name && name.substr(0,4) == 'spcy'){
                return true
            } else {
                return false
            }
        }

    },
    computed:{
        bg4 (){
            return function(str,icon){
                let asciiSum = 0;
                for (let i = 0; i < str.length; i++) {
                    asciiSum += str.charCodeAt(i);
                }
                // //console.log(asciiSum)
                const red = Math.abs(Math.sin(asciiSum) * 300).toFixed(0);
                const green = Math.abs(Math.sin(asciiSum + 1) * 200).toFixed(0);
                const blue = Math.abs(Math.sin(asciiSum + 2) * 220).toFixed(0);
                // //console.log(red,green,blue)
                const color1 =  `rgba(${red}, ${green}, ${blue}, 0.8)`;
                const color2 =  `rgba(${red}, ${green}, ${blue}, 0.5)`;
                if(icon == 'icon'){
                    // //console.log('icon')
                    return `${color1}`;
                } else {
                    return `linear-gradient(135deg, ${color1}, ${color2})`;
                }
            }
        },
    }
}
</script>
<style lang="less" scoped>
.home-ordinary-box{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    width: 100%;
    height: calc(100vh - 135px);
    // padding: 0 15px;
    background-image: url('../../../assets/sy-background-5.png');
    background-size: 28%;
    background-position: right 0px;
    background-repeat: no-repeat;
    // display: flex;
    // align-items: center;
    .content-top-box{
        display: inline-block;
        height: 100%;
        margin-right: 12px;
        // background-color: white;
        .contentBox-mainDiv {
            height: 100%;
            // background: #fff;
            .contentBox-mainDiv-title {
                text-align: center;
                line-height: 100px;
                h1 {
                    font-size: 48px;
                    font-family: cursive;
                }
            }
            .menuDiv {
                // height:calc((100vh - 260px)/3);
                // width:calc((100vh - 260px)/3);
                position: relative;
                display: inline-block;
                // margin: 20px 50px;
                text-align: center;
                // padding-top: 50px;
                background: #fff;
                font-size: 1.4em;
                font-family: SimHei;
                border-radius: 30%;
                box-shadow: 10px 10px 20px rgba(136,136,136,1);
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                //
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .menuDiv-icon {
                        width: 50%;
                        height: 50%;
                        border-radius: 50%;
                        // border: 1px solid red;
                        color: #fff;
                        // line-height: 50%;
                        font-size: 38px;
                        margin-bottom: 5px;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                    }
                    .badge {
                        position: absolute;
                        top: -5px;
                        right: -5px;
                        width: 25px;
                        height: 25px;
                        background-color: red;
                        color: white;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 25px;
                        font-size: 16px;
                        -webkit-transition: all 0.5s ease;
                        -moz-transition: all 0.5s ease;
                        -o-transition: all 0.5s ease;
                    }
            }
            .menuDiv:hover {
                    font-size: 1.5em;
                    margin-top: -25px;
                    .menuDiv-icon {
                        font-size: 42px;
                    }
                    .badge {
                        top: 0;
                        right: 0;
                    }
                }
            .aaaaaaa:nth-child(5n+1) .menuDiv > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8);
                rgba(28, 157, 208, 0.5))
            }
            .aaaaaaa:nth-child(5n+2) .menuDiv > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8);
                 rgba(115, 197, 150, 0.5))
            }
            .aaaaaaa:nth-child(5n+3) .menuDiv > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(233, 137, 161, 0.8);
                rgba(220, 156, 113, 0.5))
            }
            .aaaaaaa:nth-child(5n+4) .menuDiv > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8);
                 rgba(67, 140, 215, 0.5))
            }
            .aaaaaaa:nth-child(5n+5) .menuDiv > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8);
                rgba(117, 113, 220, 0.5))
            }
        }
    }
    .content-footer-box{
        display: inline-block;
        width: calc(100%);
        // height: calc(100vh - 150px);
        height: 200px;
        .two-half{
            display: inline-block;
            overflow-y: auto;
            // height: calc(((100% / 3)*2) - 15px);
            height: 100%;
            width: 50%;
            background: #fff;
            // margin-bottom: 15px;
        }
        .one-half{
            display: inline-block;
            overflow-y: auto;
            // height: calc((100% / 3) - 5px);
            height: 100%;
            width: 49%;
            margin-right: 1%;
            background: #fff;
        }
        .cardSpan {
            height: 40px;
            .cardSpan-Title {
                width: 50px;
                height: 25px;
                line-height: 25px;
                margin: 0px 20px;
                text-align: center;
            }
        }
    }
    .link-list{
        display: flex;
        font-size: 14px;
        flex-wrap: wrap;
        align-items: flex-start;
        .link-for-v{
            margin: 10px;
            display: flex !important;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .link-item{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            position: relative;

        }
    }
    .count-v{
        position: absolute;
        width: 20px;
        height: 20px;
        background: #f73131;
        text-align: center;
        color: #fff;
        font-size: 12px;
        top: -7px;
        right: -14px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px

    }
    .mouse-v:hover{
        background: #f0f5ff !important;
    }
    //卡片
    .ant-card-head-title{
        padding: 0 !important;
        line-height: 38px;
    }
    .ant-card-body{
        width: 100%;
        height: calc(100% - 52px);
        overflow: auto;
        // padding: 10px !important;
    }
    .ant-tabs-bar{
        border: none !important;
        margin: 0;
    }
    .ant-tabs-nav .ant-tabs-tab{
        padding: 8px 5px;
        padding-top: 0px !important;
    }
}
</style>
<style lang="less" scoped>
.home-ordinary-box{
    .content-top-box{
        margin-right: 95px;
    }
    .contentBox-mainDiv{
        padding: 1% 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .home-palace-grid{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .home-grid-item{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            flex-direction: column;
            // padding: 10px;

            .tips-box{
                position: absolute;
                width: 30px;
                height: 30px;
                background: #f73131;
                text-align: center;
                line-height: 30px;
                color: #fff;
                font-weight: 600;
                font-size: 14px;
                border: 1px solid #fff;
                border-radius: 15px;
                border-bottom-left-radius: 0;
                top: -28px;
                right: -11px;
                box-shadow: 4px 4px 3px rgba(107, 103, 103, 0.8);
            }
            .home-grid-icon-div{
                background-color: #1c93ed;
                color: #fff;
                // border-radius: 50px;
                // display: flex;
                // justify-content: center;
                // align-items: center;
                text-align: center;
                position: relative;
                // box-shadow: 2px 4px 3px rgba(222, 218, 218, 1);
                box-shadow: 5px 6px 5px rgba(107, 103, 103, 0.8);

            }


            .home-grid--title{
                display: inline-block;
                padding-top: 12px;
                // padding-bottom: 20px;
                // font-size: 22px;
                font-weight: 600;
                // color: #dedada;
                color: #8490d2;
                // 白色
                // color: #fff;
                // text-shadow: 0px 0px 1px #120202, 5px 2px 1px #000000;
                //黑色
                // color: #090a0a;
                // text-shadow: 0px 0px 1px #dfdada, 5px 2px 1px #b6afaf;
                mix-blend-mode: multiply;
            }
        }
        // .home-grid-item:nth-child(5n+1) .home-grid-icon-div{
        //     // background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8);rgba(28, 157, 208, 0.5))
        //     background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8);rgba(28, 157, 208, 0.5))
        // }
        // .home-grid-item:nth-child(5n+2) .home-grid-icon-div{
        //     background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8);rgba(115, 197, 150, 0.5))
        // }
        // .home-grid-item:nth-child(5n+3) .home-grid-icon-div{
        //     background-image: linear-gradient(135deg, rgba(233, 137, 161, 0.8);rgba(220, 156, 113, 0.5))
        // }
        // .home-grid-item:nth-child(5n+4) .home-grid-icon-div{
        //     background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8);rgba(67, 140, 215, 0.5))
        // }
        // .home-grid-item:nth-child(5n+5) .home-grid-icon-div{
        //     background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8);rgba(117, 113, 220, 0.5))
        // }
        // .home-grid-item:nth-child(6) .home-grid-icon-div{
        //     color: #fbdd00;
        // }
        .home-grid-item:nth-child(1) .home-grid-icon-div{
            background-color: rgb(16 125 212);
        }
        .home-grid-item:nth-child(2) .home-grid-icon-div{
            background-color: rgb(12 198 133);
        }
        .home-grid-item:nth-child(3) .home-grid-icon-div{
            background-color: rgb(240 119 2);
        }
        .home-grid-item:nth-child(4) .home-grid-icon-div{
            background-color: rgb(115 99 188);
        }
        .home-grid-item:nth-child(5) .home-grid-icon-div{
            background-color: rgb(237 182 16);
        }
        .home-grid-item:nth-child(6) .home-grid-icon-div{
            color: #fbdd00;
            background-color: rgba(223, 40, 15, 1);
        }
        .home-grid-item:nth-child(7) .home-grid-icon-div{
            // background-color: rgb(223 208 1);
            background-color: rgb(218 206 9);
        }
        .home-grid-item:nth-child(8) .home-grid-icon-div{
            background-color: #4f91f7;
        }
        .home-grid-item:nth-child(9) .home-grid-icon-div{
            background-color: rgb(214 10 140);
        }
        .home-grid-item:nth-child(10) .home-grid-icon-div{
            background-color: rgb(71 203 76);
        }
    }

}
</style>
